<script setup lang="ts">
// ts写法
const props = withDefaults(
  defineProps<{
    num?: number
    gender: 0 | 1
  }>(),
  {
    num: 123456
  }
)
const emits = defineEmits<{
  (e: 'sonSetNum', x: number): void
}>()
const btnClick = () => {
  emits('sonSetNum', props.num - 1)
}

// console.log(props.num)
// js写法
// PropType 是vue3提供我们的一个方法能用于缩小数据的类型范围
// 1:导入

// import { PropType } from 'vue'

// 2 类型(Number as  PropType<0 | 1>)
// const props = defineProps({
//   num: {
//     type: Number,
//     default: 123456
//   },
//   gender: {
//     type: Number as PropType<0 | 1>,
//     default: 0,
//     required: true,
//     validator: () => {
//       return true
//     }
//   }
// })
</script>

<template>
  <div class="son-page">我是子组件</div>
  <h4>{{ num }}</h4>
  <button @click="btnClick">修改num</button>
</template>

<style lang="scss" scoped></style>
